<!--
 * @Author: your name
 * @Date: 2021-07-12 15:48:16
 * @LastEditTime: 2021-11-09 11:14:06
 * @LastEditors: Please set LastEditors
 * @Description: Common feed form
 * @FilePath: \jinfeng_up\src\components\Feedback\Feedback.vue
-->
<template>
  <div class="insertFormWrap">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
      <el-row type="flex" justify="spce-betweeen" :gutter="20">
        <el-col :span="8">
          <el-form-item label="产品名称" class="ProductionName">
            <el-input v-model="dynamicValidateForm.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="营销项目名称" class="Marketing">
            <el-input v-model="dynamicValidateForm.MarketingProName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="版本号" class="VersionNum">
            <el-input v-model="dynamicValidateForm.VersionNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="8">
          <el-form-item label="营销项目状态" class="Marketing">
            <el-input v-model="dynamicValidateForm.MarketingProStatus"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="反馈来源" class="DesignatedPerson">
            <el-select v-model="dynamicValidateForm.FeedBackSource" placeholder="请选择反馈来源">
              <el-option label="巡检" value="shanghai"></el-option>
              <el-option label="客户反馈" value="beijing"></el-option>
              <el-option label="场验" value="beijing"></el-option>

              <el-option label="其他" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="指派人" class="DesignatedPerson">
            <el-select v-model="dynamicValidateForm.DesignatedPerson" placeholder="请选择指派人">
              <el-option label="指派人1" value="shanghai"></el-option>
              <el-option label="指派人2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 往下的表单内容都是可动态新增的 -->
      <div class="aboutFeedDetail">
        反馈详情描述
      </div>

      <div v-for="(domains, index) in dynamicValidateForm.domains" :key="domains.key" class="feedBackitem">
        <div class="productionDetail">
          <span class="deleteOne" @click.prevent="removedomains(domains)">删除</span>
          <span class="insertOne" @click="adddomains">新增</span>
        </div>

        <el-row type="flex" :gutter="20">
          <el-col :span="8">
            <el-form-item class="Marketing" label="标题" :prop="'domains.' + index + '.value'">
              <el-input v-model="domains.value"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="问题类型" class="DesignatedPerson">
              <el-select v-model="domains.questionType" placeholder="请选择问题类型">
                <el-option label="大类" value="big"></el-option>
                <el-option label="小类" value="small"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <div class="questionDesc"><span style="color:red;">*</span>问题描述</div>
            <!-- <el-button v-model="domains.tag"></el-button> -->
            <quill-editor v-model="domains.tag" ref="notesQuillEditor"> </quill-editor>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <!-- <el-button v-model="domains.tag"></el-button> -->
            <div class="questionDesc"><span style="color:red;">*</span>初步排查结果</div>

            <quill-editor v-model="domains.preliminaryResult" ref="notesQuillEditor"> </quill-editor>
          </el-col>
        </el-row>

        <el-row type="flex" justify="spce-betweeen" :gutter="20">
          <el-col :span="8">
            <div class="questionDesc"><span style="color:red;">*</span>是否服务请求</div>
            <el-radio-group v-model="domains.isServiceRequest">
              <el-radio :label="3">是</el-radio>
              <el-radio :label="6">否</el-radio>
            </el-radio-group>
          </el-col>

          <el-col :span="8">
            <el-form-item label="服务请求编号" class="Marketing">
              <el-input v-model="domains.serviceRequestNum"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="服务请求创建时间" class="serviceRequestNum ProductionName serviseReqCreateTime">
              <el-date-picker v-model="domains.serviseReqCreateTime" type="date" placeholder="请选择创建时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="25" type="flex" justify="spce-betweeen">
          <el-col :span="8">
            <el-form-item label="截止日期" class="DesignatedPerson serviceRequestNum">
              <el-date-picker v-model="domains.endOfTime" type="date" placeholder="请选择截止日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="影响类别 " class="VersionNum">
              <el-select v-model="domains.effrctType" placeholder="请选择影响类别">
                <el-option label="影响现场生产" value="shengchan"></el-option>
                <el-option label="影响验收" value="yanshou"></el-option>
                <el-option label="影响回款" value="huikuan"></el-option>
                <el-option label="影响不大" value="buda"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="影响描述" class="FeedBackDeatailDesc">
              <el-input v-model="domains.impactDesc" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="添加附件" class="uploadFiles">
              <br />
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <!-- <el-form-item>
        <el-button
          @click="submitForm('dynamicValidateForm')"
          icon="el-icon-s-claim"
        ></el-button>
        <el-button
          @click="resetForm('dynamicValidateForm')"
          icon="el-icon-refresh"
        ></el-button>
      </el-form-item> -->
  </div>
</template>

<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            activeNames: ['1'],

            dynamicValidateForm: {
                domains: [
                    {
                        value: '',
                        tag: '',
                        preliminaryResult: '',
                        isServiceRequest: '',
                        serviceRequestNum: '',
                        serviseReqCreateTime: '',
                        endOfTime: '',
                        impactDesc: '',
                        questionType: '',
                        isService: '',
                        effrctType: ''
                    }
                ],
                ProductionName: '',
                DesignatedPerson: '',
                VersionNum: '',
                MarketingProName: '',
                MarketingProStatus: '',
                FeedBackSource: ''
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    alert('submit!')
                } else {
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        removedomains(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1)
            }
        },
        adddomains() {
            this.dynamicValidateForm.domains.push({
                value: '',
                key: Date.now()
            })

            console.log(this.dynamicValidateForm)
        }
    }
}
</script>

<style scoped lang="less">
.el-form {
  margin-top: 40px;
}

// .insertFormWrap{
//     overflow: hidden;
// }

.productionDetail {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .colorMoudle {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #3b8af7;
    margin-right: 10px;
  }
  .messageTitle {
    font-size: 14px;

    font-weight: 400;
    color: #333333;
  }
}

::v-deep .el-form-item {
  margin-bottom: 0px;
  // margin-right: 20ple
}

::v-deep .el-form-item__label {
  font-size: 12px;

  font-weight: 400;
  color: #333333;
  margin-bottom: -10px;
}

::v-deep .ProductionName .el-input__inner {
  width: 230px;
  height: 28px;
}

// ::v-deep .serviceRequestNum .el-form-item__label {
//   // margin-top: 5px;
// }

::v-deep .DesignatedPerson .el-input__inner {
  width: 230px;
  height: 28px;
}
::v-deep .VersionNum .el-input__inner {
  width: 230px;
  height: 28px;
}

::v-deep .detailTitle .el-form-item__label {
  margin-top: 10px;
  margin-bottom: -7px;
}

::v-deep .detailTitle .el-input__inner {
  width: 230px;
  height: 28px;
}

::v-deep .Marketing .el-input__inner {
  width: 230px;
  height: 28px;
}

::v-deep .FeedBackDeatailDesc .el-textarea__inner {
  height: 70px;
  margin-top: 5px;
  // background: red;
  border: 1px solid #dadee0;
  border-radius: 2px;
}

::v-deep .el-collapse-item__header {
  border-bottom: none;
}

::v-deep .el-collapse-item__wrap {
  border-bottom: none;
  margin-top: 20px;
}

::v-deep .el-collapse-item__arrow {
  margin: 52px 8px 0 auto;
}

.productionDetail {
  margin-top: 20px;
  display: flex;
  align-items: center;
  .colorMoudle {
    display: inline-block;
    width: 2px;
    height: 14px;
    background: #3b8af7;
    margin-right: 10px;
  }
  .messageTitle {
    font-size: 14px;

    font-weight: 400;
    color: #333333;
  }
  .linethrough {
    width: 380px;
    height: 1px;
    background: #dadee0;
    margin: 0 10px;
  }
  .insertOne {
    font-size: 12px;

    font-weight: 400;
    color: #3579e0;
    text-align: center;
    line-height: 24px;
    margin-right: 15px;
    cursor: pointer;
    width: 50px;
    height: 24px;
    background: #eaf2ff;
    border: 1px solid #3579e0;
    border-radius: 5px;

    &:hover {
      background: #3579e0;
      border: 1px solid #3579e0;
      color: #ffffff;
    }
  }
  .deleteOne {
    font-size: 12px;

    font-weight: 400;
    color: #999999;
    text-align: center;
    line-height: 24px;
    margin-right: 15px;
    cursor: pointer;
    width: 50px;
    height: 24px;
    background: #ffffff;
    border: 1px solid #bfbfbf;
    border-radius: 5px;

    &:hover {
      color: #ffffff;
      background: #ed4747;
      border: 1px solid #ed4747;
    }
  }
}

::v-deep .ql-toolbar.ql-snow .ql-formats {
  margin-right: 0;
  opacity: 0.5;
  font-size: 12px;
}
.questionDesc {
  font-size: 12px;

  font-weight: 400;
  color: #333333;
  margin-bottom: 8px;
  margin-top: 15px;
}

.preliminaryResult {
  font-size: 12px;

  font-weight: 400;
  color: #333333;
  margin-bottom: 8px;
  margin-top: 8px;
  margin-top: 20px;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 230px;
}

.aboutFeedDetail {
  margin-top: 20px;
}
</style>
